<template>
  <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
      编辑
    </el-button> -->

  <el-drawer
    :model-value="drawer"
    title="修改轮播图"
    :direction="direction"
    :before-close="handleClose"
  >
    <template #default>
      <el-form :model="increase1" label-width="auto" style="max-width: 600px">
        <el-form-item label="图片地址">
          <el-input v-model="increase1.img" />
        </el-form-item>
        <el-form-item label="图片链接">
          <el-input v-model="increase1.link" />
        </el-form-item>
        <el-form-item label="图片提示">
          <el-input v-model="increase1.alt" />
        </el-form-item>
        <el-form-item>

            <el-switch v-model="increase1.flag" />
          
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" @modified="modified">修改</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>
    
    <script lang="ts" setup>
import { withDefaults, defineProps, ref, reactive, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Modifybannerapi, bannerinapi } from "@/api/bannerin";
import { INdata } from "./bannerin.vue";
// import { ElMessage } from "element-plus";
// 抽屉内部

const props = withDefaults(
  defineProps<{
    drawer: boolean;
    nowBanner: INdata;
  }>(),
  {
    drawer: false,
  }
);

// 事件、、、、
const emit = defineEmits<{
  //e是声明  viod类型是undefined
  (e: "hideEdit"): void;
  (e: "modified"): void;
}>();
// const emit = defineEmits([])
//   关闭按钮
const handleClose = () => {
  emit("hideEdit");
};
// 初始化数据
// const increase1 = reactive<INdata>({});
//   const increase1 = reactive({});
const increase1 = reactive<INdata>({
  img: "",
  alt: "",
  link: "",
  bannerid: "",
  flag: false,
});
const evauei = (nowBanner: INdata) => {
  // debugger
  increase1.img = nowBanner.img;
  increase1.alt = nowBanner.alt;
  increase1.link = nowBanner.link;
  increase1.bannerid = nowBanner.bannerid;
  increase1.flag = nowBanner.flag;
  console.log("触发了", increase1);
};

// 光定义  调用也不行
// 监听调用
// evauei(props.nowBanner);
watch(() => props.nowBanner,(newVal) => 
{evauei(newVal); },
  { deep: true }
);

const direction = ref("rtl");

const onSubmit = async () => {
  console.log("点击修改");
  const ref = await Modifybannerapi( increase1.bannerid,increase1.flag);
  if (ref.data.code === "200") {
    console.log("请求成功");
    ElMessage.success("修改成功！");
    emit("modified");
    const initBanner = async () => {
  // console.log("initBanner1",initBanner1);
  props.bannerid;

};
}
};

// 初始化数据：

const modified = () => {
  onSubmit();
  // getBannerList();
};
</script>